<script setup lang="ts">
import { ref } from 'vue'
import articelItem from '../../components/articel-item.vue'
import useSearch from '../../composition/useSearch'
import { closeToast, showLoadingToast, showNotify } from 'vant'
import dayjs from 'dayjs'

const { form, searchResList, search } = useSearch()

const onSearch = async () => {
   if (!form.value.title) return showNotify('请输入内容')
   showLoadingToast('加载中...')
   await search()
   closeToast()
}
const onCancel = () => {}
</script>

<template>
   <div class="p-5 py-0 w-screen">
      <van-empty v-if="searchResList.length <= 0" description="暂无内容..." />

      <div class="fixed bottom-40 w-[90%] overflow-auto">
         <div
            @click="$router.push({ name: 'detail', params: { id: item.id } })"
            class="item p-2 font-bold flex items-center justify-between"
            v-for="item in searchResList">
            <span>{{ item.title }}</span>
            <span class="font-normal text-slate-500 text-xs">{{ dayjs(item.createDate).fromNow() }}</span>
         </div>
      </div>

      <div class="w-[90%] fixed bottom-20 border-4 border-[#323233] rounded-xl">
         <van-search
            class="w-[100%] rounded-xl"
            v-model="form!.title"
            show-action
            placeholder="请输入搜索关键词"
            @search="onSearch"
            @cancel="onCancel" />
      </div>
   </div>
</template>

<style lang="scss" scoped>
::v-deep .van-search__action {
   font-weight: bold;
}
</style>
